import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Input } from '@tarojs/components'
import { DNavBar } from '@/components'
import http from '@/api'
import './index.scss'
import QRCode from 'qrcode'
const conf = require('../../../config/conf')

// 邀请链接baseURL
const baseURL = conf.baseURL

export default class MyEnterprise extends Component {
    state = {
        arrYellow: require('../../assets/images/icon／黄箭头@2x.png'),
        bg: require('../../assets/images/background.png'),
        photo: require('../../assets/images/photo.png'),
        rightArr: require('../../assets/images/icon／基础／01right@2x.png'),
        inviteIcon: require('../../assets/images/icon／邀请人员@2x.png'),
        closeIcon: require('../../assets/images/icon／关闭@2x.png'),
        showInviteDialog: false,
        employeeApprNumber: 0, // 待审批员工数量
        employeeNumber: 0, // 企业员工数量
        employeeList: [], // 企业员工列表
        userInfo: '', // 用户信息
        entInfo: ''
    }

    componentDidShow() {
        this.init()
    }

    init() {
        this.getUserInfo()
        this.getEntInfo()
    }

    async getEntInfo() {
        let entInfo = await http.getEntinfo()
        this.setState({
            entInfo
        })

    }

    createLink() {
        // 生成邀请链接
        let { userInfo, entInfo } = this.state
        let link = encodeURI(`${baseURL}#/pages/myEnterprise/joinEnterprise?entId=${userInfo.entId}&imName=${userInfo.imName}&entName=${entInfo.entName}&manager=${entInfo.entOwner}`)
        this.refs.likeDom.value = link

        QRCode.toCanvas(document.getElementById('canvas'), link, {
            width: 160,
            height: 160
        }, function (error) {
            if (error) throw new Error(error)
        })
    }

    copyLink() {
        this.refs.likeDom.select()
        document.execCommand('copy')
        Taro.showToast({
            title: '复制成功',
            icon: 'none'
        })
    }

    async searchEmployeeAppr(entId) {
        let employeeApprNumber = await http.searchEmployeeAppr({ entId })
        this.setState({
            employeeApprNumber
        })
    }

    async getUserInfo() {
        let userInfo = await http.myselfDetail()
        this.setState({
            userInfo
        })
        this.searchEmployeeAppr(userInfo.entId)
        this.searchEmployeeList(userInfo.entId)
    }

    async searchEmployeeList(entId) {
        let employeeList = await http.searchEmployeeList({ entId })
        let employeeNumber = employeeList.length
        if (employeeList.length > 4) {
            employeeList.length = 4
        }
        this.setState({
            employeeNumber,
            employeeList,
        })
    }

    handleCreateTime(time) {
        let tempArr = time.split('-')
        return `${tempArr[0]}年${tempArr[1]}月${tempArr[2].split(' ')[0]}日`
    }

    render() {
        const {
            arrYellow,
            bg,
            photo,
            rightArr,
            inviteIcon,
            closeIcon,

            showInviteDialog,
            employeeApprNumber,
            employeeNumber,
            employeeList,
            userInfo,
            entInfo
        } = this.state

        return (
            <View className="b_my_enterprise">
                <DNavBar title="我的企业"></DNavBar>

                <View className="container">
                    {
                        (userInfo.imIdStatus == 1 && employeeApprNumber != 0) &&
                        <View className="apply" onClick={() => {
                            Taro.navigateTo({ url: `/pages/myEnterprise/audit?entId=${userInfo.entId}` })
                        }}>
                            <Text>加入企业申请（{employeeApprNumber}）</Text>
                            <Image className="img" src={arrYellow}></Image>
                        </View>
                    }
                    <View className="header">
                        <Image className="bg" src={bg}></Image>
                        <View className="header_content">
                            <View className="header_content_top">
                                <View className="header_content_top_left">
                                    <Text className="name">{userInfo.imName}</Text>
                                    {(userInfo.imIdStatus == 1) && <Text className="tag"></Text>}
                                    <View className="company">{userInfo.entName}</View>
                                </View>
                                <View className="header_content_top_right">
                                    <Image className="photo" src={userInfo.imPicUrl} onError={(event) => {
                                        event.target.src = photo
                                    }}></Image>
                                </View>
                            </View>
                            <View className="header_content_btm">
                                <Text>本企业创建于{entInfo && this.handleCreateTime.bind(this, entInfo.approTime)()}</Text>
                            </View>
                        </View>
                    </View>

                    {/* 企业成员 */}
                    <View className="member">
                        <View className="member_title">
                            <View className="member_title_left">企业成员</View>
                            <View className="member_title_right" onClick={() => {
                                Taro.navigateTo({
                                    url: '/pages/myEnterprise/member'
                                })
                            }}>
                                <Text className="text">{employeeNumber}人</Text>
                                <Image className="img" src={rightArr}></Image>
                            </View>
                        </View>
                        <View className="member_content">
                            {
                                employeeList.map(item => <View className="member_content_item">
                                    <Image src={item.imPicUrl} className="photo" onError={(event) => {
                                        event.target.src = photo
                                    }}></Image>
                                    <Text className="name">{item.imName}</Text>
                                </View>)
                            }
                            <View className="member_content_item" onClick={() => {
                                this.setState({
                                    showInviteDialog: true
                                }, () => { this.createLink() })
                            }}>
                                <Image className="photo" src={inviteIcon}></Image>
                                <Text className="name">邀请</Text>
                            </View>
                        </View>
                    </View>


                    {/* 企业信息 */}
                    <View className="enterprise_info">
                        <View className="enterprise_info_title">
                            <View className="enterprise_info_title_left">企业信息</View>
                            {
                                userInfo.imIdStatus == 1 && <View className="enterprise_info_title_right" onClick={() => {
                                    Taro.navigateTo({
                                      url: `/pages/enterpriseform/enterpriseform?edit=${userInfo.entId}`
                                    })
                                }}>
                                    <Text className="text">修改营业执照</Text>
                                    <Image className="img" src={rightArr}></Image>
                                </View>
                            }
                        </View>
                        <View className="enterprise_info_con">
                            <View className="enterprise_info_con_item">
                                <Text className="left_text">企业信息</Text>
                                <Text className="right_text">{userInfo.entAtt}</Text>
                            </View>
                            <View className="enterprise_info_con_item">
                                <Text className="left_text"> 企业地址</Text>
                                <Text className="right_text">{userInfo.entAddr}</Text>
                            </View>
                        </View>
                    </View>
                </View>

                {
                    // 邀请弹层
                    showInviteDialog && <View className="invite_dialog">
                        <View className="invite_dialog_body">
                            <View className="invite_dialog_body_content">
                                <View className="title">邀请同事</View>
                                <View className="con">
                                    <View className="con_title">分享二维码通知加入</View>
                                    <View className="con_text">成员扫码后快速加入企业</View>
                                    <canvas id="canvas"></canvas>
                                    <View className="copy_like" onClick={this.copyLink.bind(this)}>复制邀请链接</View>
                                </View>
                            </View>
                            <View className="invite_dialog_body_close">
                                <Image src={closeIcon} className="closeIcon" onClick={() => {
                                    this.setState({
                                        showInviteDialog: false
                                    })
                                }}></Image>
                            </View>
                            <input type="text" ref="likeDom" style={{ opacity: 0, marginTop: '100px' }} />
                        </View>
                    </View>
                }
            </View>
        )
    }
}
